<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /* 
            经过上节课的学习, 不难发现其实媒体查询的min-width和max-width其实就是数学中大于等于和小于等于的意思

            注意是包含等于的, 所以尽量不要出现重合的数字

            另外, 有一个要注意的就是媒体查询是会一行一行执行的, 所以你在写的时候最好按照从大到小或者从小到大的顺序来, 否则会有很好笑的事情发生

            当屏幕宽度有下的媒体查询有冲突时, 后者覆盖前者, 比如:
                max-width: 800px;
                min-width: 400px;
                很明显当屏幕在400-800时，同时满足上面两个条件，那么谁后写就取谁
        */
        @media screen and (max-width:539px){
            body{
                background-color: blue;
            }
        }

        @media screen and (min-width:540px) and (max-width:969px){
            body{
                background-color: green;
            }
        }

        @media screen and (min-width:970px){
            body{
                background-color: red;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>